<template>
  <view class="expressage">
    <viwe class="exp-code">
      <view class="exp-desc">快递公司编码:</view>
      <uni-easyinput
        class="uni-mt-5"
        trim="all"
        :clearable="false"
        v-model="expressageCode"
        placeholder="在此输入快递公司编码"
      ></uni-easyinput>
      <van-button type="warning" size="small" @click="showPopup = true"
        >查询快递编码</van-button
      >
    </viwe>
    <view class="exp-code">
      <view class="exp-desc">快递单号:</view>
      <uni-easyinput
        class="uni-mt-5"
        suffixIcon="search"
        trim="all"
        v-model="expressageNum"
        placeholder="在此输入快递单号"
        @iconClick="getExpressageNum"
      ></uni-easyinput>
    </view>
    <uni-steps
      v-if="!expressageInfo"
      :options="steps"
      active-color="#007AFF"
      :active="active"
      direction="column"
    />
    <view style="text-align: center; margin-top: 50rpx" v-else>
      暂无更多物流信息~
    </view>
    <!-- 快递公司编码弹出层 -->
    <van-popup
      :show="showPopup"
      round
      position="bottom"
      custom-style="height: 50%"
      :closeable="true"
      @close="showPopup = false"
    >
      <!-- 公司编码 -->
      <uni-table ref="table" border stripe emptyText="暂无更多数据">
        <uni-tr>
          <uni-th width="30rpx" align="center">序号</uni-th>
          <uni-th width="30rpx" align="center">公司编码</uni-th>
          <uni-th width="30rpx" align="center">快递公司</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in list" :key="index">
          <uni-td>{{ index + 1 }}</uni-td>
          <uni-td>{{ item.cpCode }}</uni-td>
          <uni-td align="center">{{ item.expressCompany }}</uni-td>
        </uni-tr>
      </uni-table>
    </van-popup>
  </view>
</template>

<script>
// import FlyIO from 'flyio/dist/npm/wx'
import { expressageCodeList } from './list' // 导入公司太多，抽离出去
import mixin from  '@/mixins/mixins.js'
export default {
  name: 'Expressage',
  mixins: [mixin],
  data() {
    return {
      expressageNum: '', // 快递单号
      expressageCode: '', // 快递公司编码
      active: 0, // 当前进度条
      steps: [], // 物流信息
      showPopup: false,
      list: [], // 快递公司编码列表
      expressageInfo: false
    }
  },
  created() {
    this.list = expressageCodeList
  },
  methods: {
    async getExpressageNum() {
      if (!this.expressageCode) {
        return this.$msg('请输入快递公司编码，可点击查询按钮快速查看~')
      }
      // 创建新的 FlyIO 实例 因为这个api需要单独设置请求头
      // const http = new FlyIO()
      // 设置请求头
      // http.config.headers = {
      //   'X-APISpace-Token': 'aug5rcbg3vgyusnreb3qavhd1t3ewevb',
      //   'Authorization-Type': 'apikey',
      //   'Content-Type': 'application/json'
      // }
      // 请求参数
      const data = {
        cpCode: this.expressageCode, // 物流编码
        mailNo: this.expressageNum // 快递单号
      }
      // Api地址 https://www.apispace.com/
      const res = await this.$http.post(
        `https://eolink.o.apispace.com/wlgj1/paidtobuy_api/trace_search`,
        data
      )
      if (res.success) {
        // console.log(this.steps,res)
        const arr = []
        const arr2 = []
        // 后端返回的是对象，需要把对象变为数组 arr为第一次遍历的数组 arr2为第二次遍历的数组
        for (const key in res) {
          arr.push(res[key])
        }
        const newArr = arr[3]
        // console.log(newArr,arr)
        if (!newArr) {
          // 如果查询的里边没有物流信息数组时显示暂无信息并提示用户
          const isString = typeof newArr === 'undefined' // 如果等于undefined 说明没有物流信息
          this.expressageInfo = isString ? true : false
          return this.$msg('暂无更多物流信息~')
        }
        // 遍历第二次
        for (const key in newArr) {
          arr2.push(newArr[key])
        }
        // 如果查询的里边没有物流信息数组 和 114行代码作用一样
        // const isString =  arr2.every(item => {
        //   return typeof item === 'string'
        // })
        // this.expressageInfo =  isString ? true :false
        // console.log(arr,arr2)
        // 遍历取到物流信息数组
        arr2.forEach((item) => {
          if (typeof item !== 'string') {
            // console.log(item,'if')
            // 将数组反转并赋值
            this.steps = item.reverse()
          }
        })
        // 遍历数组更改数组对象中的键
        this.steps.forEach((item) => {
          // uni的纵向滚动条只支持title和desc
          item.title = item.logisticsStatus
          // 转换title提示为中文提示
          if (item.title === 'WAIT_ACCEPT') {
            item.title = '待揽收'
          } else if (item.title === 'ACCEPT') {
            item.title = '已揽收'
          } else if (item.title === 'TRANSPORT') {
            item.title = '运输中'
          } else if (item.title === 'DELIVERING') {
            item.title = '派件中'
          } else if (item.title === 'AGENT_SIGN') {
            item.title = '已代签收'
          } else if (item.title === 'SIGN') {
            item.title = '已签收'
          } else if (item.title === 'FAILED') {
            item.title = '包裹异常'
          }
          // console.log(this.steps)
        })
      } else {
        // 接口返回false
        this.$msg('查询失败，请输入大写字母或确认编码与运单号是否匹配~')
      }
    },

  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-button {
  margin: 6rpx 10rpx;
}
.expressage {
  .exp-code {
    display: flex;
    margin-top: 40rpx;
    .exp-desc {
      line-height: 68rpx;
      width: 220rpx;
    }
  }
}
</style>
